<template>
<!-- 查询订单 -->
	<div id="SupplierOrderForm">
		<el-table :data="OrderAry" style="width: 100%">
      <el-table-column prop="purchaseId" label="序号" width="180">
      </el-table-column>
		  <el-table-column prop="purchaseOrderNumber" label="订单编号" width="180">
		  </el-table-column>
		  <el-table-column prop="totalAmount" label="总数量" width="180">
		  </el-table-column>
		  <el-table-column prop="totalPrice" label="总金额">
		  </el-table-column>
<!--		  <el-table-column prop="secondKindName" label="登记时间">-->
<!--		  </el-table-column>-->
		  <el-table-column prop="payMethod" label="支付方式">
        <template slot-scope="scope">
          <span v-if="scope.row.payMethod=='P002-1'">余额支付</span>
          <span v-if="scope.row.payMethod=='P002-2'" >微信支付</span>
          <span v-if="scope.row.payMethod=='P002-3'" >现金支付</span>
        </template>
		  </el-table-column>
		  <el-table-column prop="conveyTag" label="配送标志">
        <template slot-scope="scope">
          <span v-if="scope.row.conveyTag=='P001-1'">代付款</span>
          <span v-if="scope.row.conveyTag=='P001-2'" style="color:#e6a23c">待发货</span>
          <span v-if="scope.row.conveyTag=='P001-3'" style="color: #409eff">待收货</span>
          <span v-if="scope.row.conveyTag=='P001-4'">已收货</span>
          <span v-if="scope.row.conveyTag=='P001-5'">已完成</span>
        </template>
		  </el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
		      <template slot-scope="scope">
		        <el-button 
					size="small"
					type="primary"
					round 
					icon=""
					@click="viewOrder(scope.$index,scope.row)">查看详情</el-button>
            <el-button
					size="small"
					type="success"
					round
					icon=""
          v-if="showButton(scope.row.conveyTag)"
					@click="fahuoOrder(scope.$index,scope.row)">发货</el-button>
		      </template>
		    </el-table-column>
		 </el-table>
         <!---分页组件-->
		     <el-pagination
		       @size-change="handleSizeChange"
		       @current-change="handleCurrentChange"
		       :current-page="currentPage"
		       :page-sizes="pageSizeList"
		       :page-size="pageSize"
		       layout="total, sizes, prev, pager, next, jumper"
		       :total="total">
		     </el-pagination>
    <!--  详情对话框  -->
    <el-dialog title="商品详情" :visible.sync="supplierview" width="600px">
        <el-table :data="supplierformviewAry" style="width: 100%">
        <el-table-column prop="goodsId" label="商品编号" width="180">
        </el-table-column>
        <el-table-column prop="count" label="数量" width="180">
        </el-table-column>
        <el-table-column prop="price" label="单价">
        </el-table-column>
        <!--		  <el-table-column prop="secondKindName" label="登记时间">-->
        <!--		  </el-table-column>-->
        <el-table-column prop="subtotal" label="小计">
        </el-table-column>
      </el-table>
    </el-dialog>

	</div>
</template>

<script>
	export default{
		data() {
			return{
			  //对话框表格数组
        supplierformviewAry:[],
        //展示对话框
        supplierview: false,
			  //查询表格
        OrderAry:[],
				// 当前页号
				currentPage: 1,
				// 当前页大小
				pageSize: 5,
				// 总记录数
				total: 0,
				// 页大小列表
				pageSizeList: [2, 5, 10, 20]
			}
		},
		methods:{
      //发货按钮
      async fahuoOrder(index,row){
        //根据id查询订单信息
        const {data: res} = await this.$http.post(`/purchaseOrder/OrderInfoById/${row.purchaseId}`)
        //将查询的数据赋给对象
        this.OrderDx=res
        console.log("1",this.OrderDx)
        //发请求更改配送标志为 待收货
        const {data: ress} = await this.$http.post(`/purchaseOrder/OrderInfoupdateId`,this.OrderDx)
        //消息提示
        this.$message({
          showClose: true,
          message: '发货成功',
          type: 'success'
        });
        //再次查询
        this.SupplierOrderPage()
      },
		  //查看详情
      async viewOrder(index,row){
          // 清空数组
          this.supplierformviewAry=[]
          //展示对话框
          this.supplierview = true
          //根据id查询订单明细信息
          const {data: res} = await this.$http.post(`/purchaseOrderDetails/OrderDetailsById/${row.purchaseId}`)
          //只展示最新的一行
          this.supplierformviewAry.push(res)
          console.log("222",res)
      },
      // 页大小改变
      handleSizeChange(val) {
          this.pageSize = val
          this.SupplierOrderPage()
      },
      // 页号改变
      handleCurrentChange(val) {
        this.currentPage = val
        this.SupplierOrderPage()
      },
      //分页查询供应商订单信息
      async SupplierOrderPage(){
        //拿用户id
        this.sysUsersId=this.$store.state.user.sysUsersId
        console.log(this.sysUsersId)
        //定义用户id
        let sysUsersId=this.sysUsersId
        //带用户id去分页查询
        const {data: res} = await this.$http.post(`purchaseOrder/SupplierOrderListPage/
        ${this.currentPage}/${this.pageSize}/${sysUsersId}`,this.searchObj)
        this.OrderAry=res.list
        this.total=res.total
      },
      showButton(tag){
          if (tag=='P001-2'){
            return true
          }
          return false
      }
    },
    created() {
      this.SupplierOrderPage()

    }
  }
</script>

<style>
</style>